<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://best.openssf.org/assets/css/style.css">
<link rel="stylesheet" href="checker.css">
<script src="checker.js"></script>
<script src="input2.js"></script>
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/">

</head>
<body>
<!-- For GitHub Pages formatting: -->
<div class="container-lg px-3 my-5 markdown-body">
<h1>Lab Exercise input2</h1>
<p>
This is a lab exercise on developing secure software.
For more information, see the <a href="introduction.html" target="_blank">introduction to
the labs</a>.

<p>
<h2>Task</h2>
<p>
<b>
Practice validating specialized text input in a program
using a regular expression.
</b>

<p>
<h2>Background</h2>
<p>
In this exercise, we'll add some simple input validation to
a server-side program written in JavaScript using the
Express framework (version 4) and the express-validator library.
</p>

<p>
However, this time we're going to do input validation for a specific
data value using regular expressions. Many programs have
specialized data values that are easily tested using
regular expressions.

<p>
The code below sets up handlers for a <tt>get</tt> request on path
<tt>/parts</tt>.
This code could be triggered, for example, by requesting
<tt>http://localhost:3000/parts?id=AX-794-7</tt>
(if it was running at <tt>localhost</tt> and responding to port 3000).
If there are no validation errors, the code is supposed to show the part id.
If there is a validation error, it responds with HTTP
error code 422 ("Unprocessable Content"), a status code suggesting
that the request was invalid for some reason, along with an error message.

<p>
In this case, we want to implement proper input validation.
We want to ensure it's not longer than a certain length and
that it matches a specific pattern.
Just like lab input1, as written,
this program has a vulnerability we haven't discussed yet called
Cross-site Scripting (XSS).
This particular vulnerability would be entirely prevented if we did
better input validation.

<p>
<h2>Task Information</h2>
<p>

<p>
In this application, the part id format is always
two uppercase Latin letters (each <tt>A</tt> through <tt>Z</tt>),
then a dash (<tt>-</tt>), a sequence of one or more digits,
another dash (<tt>-</tt>), and another sequence of one or more digits.

<p>
To do that:
<ol>
<li>After the first parameter to <tt>app.get</tt>
which says <tt>'/parts'</tt>, add a new comma-separated parameter.
<li>Start this new parameter with
<tt>query('id')</tt> to select the
<tt>id</tt> parameter for validation (we have <i>not</i> filled
in this part in this lab).
<li>Add a period (<tt>.</tt>) and the validation requirement
<tt>isLength()</tt>
<li>The <tt>isLength</tt> method takes, as an optional parameter inside
its parentheses,
an object providing specific information such as a minimum and a maximum.
We only want a maximum,
so it should look something like
<tt>isLength({max: YOUR_MAXIMUM})</tt>.
Those familiar with JavaScript will know that the "length" value is
the length of the string in UTF-16 code units; that's fine
for our purposes.
</ol>
</p>

<p>
We also need to verify that the input matches our pattern,
which we can verify using a regular expression.
In this situation, we can do this by:
<ol>
<li>appending another period (<tt>.</tt>) and the validation requirement
<tt>matches()</tt>.
<li>Inside those parenthesis you should supply slash (<tt>/</tt>, the
text of the regular expression to match, and another slash (<tt>/</tt>).
In JavaScript, a pair of slashes (<tt>/</tt>) surrounds a regular expression.
<li>Remember to match the <i>entire</i> expression
(in other words, use <tt>^</tt> and <tt>$</tt>).
<li>Also, remember that a way to match a single uppercase character is the
pattern <tt>[A-Z]</tt>
</ol>

<p>
Use the “hint” and “give up” buttons if necessary.

<p>
<h2>Interactive Lab (<span id="grade"></span>)</h2>
<p>
<b>Please change the code below so the query parameter
<tt>id</tt> is only accepted if it's no longer than 80 characters
and meets this application's part id format requirement.
The format is
two uppercase Latin letters (each <tt>A</tt> through <tt>Z</tt>),
then a dash (<tt>-</tt>), a sequence of one or more digits,
another dash (<tt>-</tt>), and another sequence of one or more digits.
</b>
<p>

<!--
You can use this an example for new labs.
For multi-line inputs, instead of <input id="attempt" type="text" ...>, use
<textarea id="attempt" rows="2" cols="65">...</textarea>
-->
<form id="lab">
<pre><code
>// Set up Express framework and express-validator library
const express = require("express");
const app = express();
const { query, matchedData, validationResult } =
    require('express-validator');

// Implement requests, e.g., http://localhost:3000/parts?id=1
app.get('/parts',
<textarea id="attempt0" rows="2" cols="64" spellcheck="false">
  ,</textarea>
  (req, res) =&gt; { // Execute this code if /parts seen
    const result = validationResult(req); // Retrieve errors
    if (result.isEmpty()) { // No errors
      const data = matchedData(req); // Retrieve matching data
      return res.send(`You requested part id ${data.id}!`);
    }
    res.status(422).send(`Invalid input`);
  })
</code></pre>
<button type="button" class="hintButton">Hint</button>
<button type="button" class="resetButton">Reset</button>
<button type="button" class="giveUpButton">Give up</button>
<br><br>
<p>
<i>This lab was developed by David A. Wheeler at
<a href="https://www.linuxfoundation.org/"
>The Linux Foundation</a>.</i>
<br><br>
<p id="correctStamp" class="small">
<textarea id="debugData" class="displayNone" rows="20" cols="65" readonly>
</textarea>
</form>

</div><!-- End GitHub pages formatting -->
</body>
</html>
